<template>
    <div class="swiper">
        <swiper
            class="wrap"
            :options="swiperOption"
        >
            <swiper-slide
                v-for="(slide, index) in swiperSlides"
                :key="index"
            >
                <img
                    class="swiperImg"
                    src="/static/banner-pic.jpg"
                >
            </swiper-slide>
        </swiper>
        <div
            class="swiper-pagination"
            slot="pagination"
        ></div>
    </div>
</template>
<script>
// 引入轮播样式及组件
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    name: 'index-swiper',
    components: {	//注册组件
        swiper,
        swiperSlide
    },
    data() {
        return {
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination'
                }
            },
            swiperSlides: [1, 2, 3]
        }
    }
}
</script>
<style lang="less" scoped>
.swiper {
    height: 350px;
    .wrap {
        box-shadow: 0 10px 20px #eaeff4;
        width: 670px;
        border-radius: 20px;
        .swiperImg {
            width: 100%;
            height: 320px;
            vertical-align: top;
        }
    }
    .swiper-pagination {
        padding: 0 40px;
        right: 0;
        /deep/.swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            opacity: 1;
            background: #dfe0e1;
        }
        /deep/.swiper-pagination-bullet-active {
            background: #299d92;
        }
    }
}
</style>
